<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body {
			width: 100%;
			height: 100%;
			background-image: url(img/timg1.gif);
			background-size: 100%;
			overflow: hidden;
		}
		
		a {
			display: block;
			width: 20%;
			color: purple;
			margin: auto auto;
			text-align: center;
			transition: all 5s ease-in-out;
			white-space: nowrap;
		}
		
		button {
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: gold;
			width: 10%;
			height: 10%;
			font-size: 1.3em;
		}
		
		a:hover {
			font-size: 1.3em;
			color: greenyellow;
			transform: rotateY(180deg);
		}
	</style>

	<body>
		<audio src="img/news.mp3" autoplay="autoplay" hidden="hidden" loop="loop"></audio>
		<div>
			<a href="rocket_jq.html">
				<h3>20171226-小火箭jq版</h3></a>
			<a href="table_jq.html">
				<h3>20171226-表单jq版</h3></a>
			<a href="ajax.html">
				<h3>20171229-轮播图jq-ajax版</h3></a>
			<a href="http://bluej14.gitee.io/bluej-fuli/">
				<h3>20180103-富力1.0版</h3></a>
			<a href="table_vue.html">
				<h3>20180103-表单vue版</h3></a>
			<a href="calculator.html">
				<h3>20180110-计算器vue版</h3></a>
		</div>
		<button>列表</button>
		<script type="text/javascript">
			var al = document.querySelectorAll("a"),
				abc,
				as1,
				arr = [];
			document.querySelector("div").style.height = window.innerHeight + "px";
			for(var i = 0; i < al.length; i++) {
				arr.push([al[i].offsetLeft, al[i].offsetTop]);
			}
			srll();

			function srll() {
clearTimeout(as1);
				document.querySelector("button").style.backgroundColor = "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.random() + ")";
				for(var i = 0; i < al.length; i++) {
					al[i].style.transition = "";
					getComputedStyle(al[i]).transform;
					al[i].style.transform = "rotateX(" + (Math.random() * 2 - 1) * 360 + "deg) rotateY(" + (Math.random() * 2 - 1) * 360 + "deg) scale(" + Math.random() + "," + Math.random() + ")";
					al[i].style.position = "fixed";
					al[i].style.top = Math.random() * 80 + "%";
					al[i].style.margin = "0px";
					al[i].style.left = Math.random() * 80 + "%";
					al[i].style.color = "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.random() + ")";
				}
				abc = setTimeout(srll, 5000);
			}
			document.querySelector("button").addEventListener("click", function(e) {
				clearTimeout(abc);
				for(var i = 0; i < arr.length; i++) {
					al[i].style.transition = "none";
					al[i].style.transform = "translateX(-50%)";
					al[i].style.top = arr[i][1] + "px";
					al[i].style.left = "50%";
					al[i].style.color = "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ",1)";
				}
				as1 = setTimeout(srll, 5000);
			})
		</script>

</html>